<template>
    <div class="order-detail">
        <v-header name="查看合同" @actionClick="actionClick" :right="selectContractStatus=='070'"></v-header>
        <div class="headAction" v-if="typeOpen">
            <div class="menuShade" @click="headMenuBlur"></div>
            <ul>
                <li @click="popUp(1)">取消订单</li>
                <li @click="popUp(2)">否决订单</li>
            </ul>
        </div>
        <div class="tab">
            <router-link :to="oid?{path:`/order/uncommitted/${oid}/orderBasic`}:{path:`/order/${contract_no}/orderBasic`}" replace>基本信息</router-link>
            <router-link :to="oid?{path:`/order/uncommitted/${oid}/orderImage`}:{path:`/order/${contract_no}/orderImage`}" replace>影像资料</router-link>
            <router-link v-if="showPrepayment" :to="{path:`/order/${contract_no}/orderPrepayment`}"
                         replace>还款计划
            </router-link>
        </div>
        <div class="tab-content">
            <router-view></router-view>
        </div>

    </div>
</template>
<script>
    import header from "../header"
    import {MessageBox} from 'mint-ui';
    import {mapState} from "vuex";
    export default {
        name: 'orderDetail',
        data: function () {
            return {
                contract_no: this.$route.params.contract_no,
                typeOpen: false,
                actionType: 0,
                oid: this.$route.params.oid,
            }
        },
        methods: {
            actionClick(){
                this.typeOpen = !this.typeOpen
            },
            headMenuBlur(){
                this.typeOpen = false
            },
            popUp(type){
                this.actionType = type
                this.typeOpen = false
                this.showPrompt()
            },
            showPrompt(){
                let self = this;
                let title = ""
                if (self.actionType == 1) {
                    title = "取消原因"
                } else if (self.actionType == 2) {
                    title = "否决原因"
                }
                MessageBox.prompt(title, '填写信息', 1).then(({value, action}) => {
                    if (value == null || value == '') {
                        self.$alert("原因不能为空");
                        this.showPrompt(title)
                        return false
                    }
                    if (self.actionType == 1) {
                        this.cancelOrder(value)
                        return true
                    } else if (self.actionType == 2) {
                        this.refuseOrder(value)
                        return true
                    }
                    self.$alert("未知操作");
                }, () => {
                });
            },
            cancelOrder(reason){
                let self = this;
                this.$store.dispatch({type: 'cancelOrder', params: {contractNo: this.contract_no, content: reason}})
                    .then((res) => {
                        self.alert(res.message)
                    }, (err) => {
                        self.showPrompt()
                    })
            },
            refuseOrder(reason){
                let self = this;
                this.$store.dispatch({type: 'refuseOrder', params: {contractNo: this.contract_no, content: reason}})
                    .then((res) => {
                        self.alert(res.message)
                    }, (err) => {
                        self.showPrompt()
                    })
            },
            alert(message){
                MessageBox.alert(message).then(action => {
                });
            }
        },
        computed: {
            ...mapState({
                selectContractStatus: state => state.order.selectContractStatus
            }),
            showPrepayment(){
                return this.selectContractStatus == '050' || this.selectContractStatus == '160' || this.selectContractStatus == '110'
            }
        },
        components: {
            "v-header": header
        }
    }
</script>